<template>
	<view>
		<view class="page">
			<!-- <view class="example-body">
				<uni-nav-bar background-color="#003466" color="#ffffff" :status-bar="true" @click-left="back" left-icon="arrowleft">
					<view class="flex-item">设备设施详情</view>
				</uni-nav-bar>
			</view> -->
			<view class="example-body">
				<uni-nav-bar background-color="#003466" color="#ffffff" :status-bar="true" @click-left="back" left-icon="arrowleft" style="position: relative;">
					<view class="flex-item">设备设施详情</view>
				</uni-nav-bar>
			</view>
			<view>
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="text"></uni-segmented-control>
				<view id="manage-container" class="content">
					<view v-show="current === 0" class="view-top">
						<view class="man-option option_active">
							<!--../../../static/images/infpic.png-->
							<view class="inf-pic" v-show="photo.length != 0">
								<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
									<swiper-item  v-for = "(item, index) in photo" :key="index">
										<image :src="item" mode=""></image>
									</swiper-item>
								</swiper>
							</view>
							<!--基本信息-->
							<uni-data-show :showData="data1" :isShowTitle="false"></uni-data-show>
						</view>
					</view>
					<view v-show="current === 1" class="view-top">
						<view class="man-option man-collaps">
							<!--动态参数-->
							<img class="noassets" src="../../../static/images/noassets.png" alt="" v-if="noassetsFlag">
							<uni-data-show :showData="data3" :isShowTitle="false" v-if="!noassetsFlag"></uni-data-show>
						</view>
					</view>
					<view v-show="current === 2" class="view-top">
						<view class="man-option">
							<view class="man-option">
								<view class="pdinf">
									<Malfunction ref="malfunction" :equipmentRun="equipmentRun" :eqId="eqId"></Malfunction>
									<!-- <uni-data-show :showData="data2" :isShowTitle="true"></uni-data-show> -->
								</view>
							</view>
						</view>
					</view>
					<view v-show="current === 3" class="view-top">
						<view class="man-option">
							<view class="man-option">
								<view class="pdinf">
									<Maintenance ref="maintenance" :equipmentRun="equipmentRun" :eqIds="eqId"></Maintenance>
									<!-- <uni-data-show :showData="data4" :isShowTitle="true"></uni-data-show> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//引入故障记录列表
	import Malfunction from '@/pages/project-maintenance/malfunction-manage/malfunction-manage-list.vue'
	//引入维护记录列表
	import Maintenance from '@/pages/project-maintenance/maintenance-manage/maintenance-manage-list.vue'
	import uniList from '@/components/uni-list/uni-list.vue';
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	//引用key,value显示组件
	import uniDataShow from '@/components/uni-data-show/uni-data-show.vue';

	export default {
		components: {
			uniList,
			uniListItem,
			uniSegmentedControl,
			uniNavBar,
			uniIcon,
			uniDataShow,
			Malfunction,
			Maintenance
		},
		data() {
			return {
				noassetsFlag:false,
				eqId:"",
				equipmentRun:false,
				items: ['设备属性', '技术参数', '故障记录', '维护记录'],
				current: 0,
				eqName:"",
				teamData:[],
				photo:[],
				data1: {
					"title": "",
					"lists": [
						{
							"key": "设备名称",
							"value": "--"
						}, {
							"key": "所属系统",
							"value": "--"
						},
						{
							"key": "所在位置",
							"value": "--"
						},
						{
							"key": "设备型号",
							"value": "--"
						},
						{
							"key": "出厂日期",
							"value": "--"
						},
						{
							"key": "安装日期",
							"value": "--"
						},
						{
							"key": "厂商信息",
							"value": "--"
						},
					]
				},
				//故障记录
				data2: {
					"title": "",
					"lists": [
						{
							"key": "故障类型",
							"value": "--"
						}, {
							"key": "设备名称",
							"value": "--"
						},
						{
							"key": "故障来源",
							"value": "--"
						},
						{
							"key": "故障状态",
							"value": "--"
						},
						{
							"key": "故障优先级",
							"value": "--"
						},
						{
							"key": "所属专业队伍",
							"value": "--"
						},
						{
							"key": "故障描述",
							"value": "--"
						},
					]
				},
				//设备动态参数
				data3: {
					"title": "",
					"lists": []
				},
				data4: {
					"title": "",
					"lists": [
						{
							"key": "所属系统",
							"value": "--"
						}, {
							"key": "处理对象",
							"value": "--"
						},
						{
							"key": "任务分类",
							"value": "--"
						},
						{
							"key": "任务优先级",
							"value": "--"
						},
						{
							"key": "任务状态",
							"value": "--"
						},
						{
							"key": "维护分队",
							"value": "--"
						},
						{
							"key": "维护内容",
							"value": "--"
						},
					]
				}
			};
		},
		methods: {
			change(e) {
				console.log(e);
			},
			
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index;
				}
			},
			
			back() {
				uni.navigateBack({
					delta: 1,
				});
			},
			
			async getInfo(id){
				await this.$api.MaintenanceTask.ShowTeamData().then(res => {
					this.teamData = res[1].data.result;
				}).catch(res => {
					uni.showToast({
						title: '维护队伍获取失败',
						duration: 2000
					});
				});
					
				let param = { 
					rowguid: id ,
				};
				
				//设备属性、技术参数
				this.$api.Equipment.GetEquipmentInfo(param).then(res => {
					console.log(res)
					let data=res[1].data.result;
					this.photo=data.photo;
					this.data1.lists[0].value=data.model.equipmentName;
					this.data1.lists[1].value=this.$helper.getTextByValue('所属系统', data.model.systemName);
					this.data1.lists[2].value=data.model.roomName == null||""?"暂无数据":data.model.roomName==null;
					this.data1.lists[3].value=data.model.equipmentModel == ""?"暂无数据":data.model.equipmentModel;
					this.data1.lists[4].value=data.model.ManufactureDate == null||""?"暂无数据":data.model.ManufactureDate;
					this.data1.lists[5].value=data.model.InstallationDate == null||""?"暂无数据":data.model.InstallationDate;
					this.data1.lists[6].value=data.model.manufacturer == ""?"暂无数据":data.model.manufacturer;
					if(data.param.length != 0){
						this.data3.lists=JSON.parse(JSON.stringify(data.param).replace(/paramKey/g, 'key').replace(/paramValue/g, 'value'));
					}else{
						this.noassetsFlag=true
					}
					
				}).catch(res => {
					// 失败进行的操作/给出提示
					uni.showToast({
						title: '接口数据请求失败',
						duration: 2000
					});
				});
				
				//故障记录
				this.$refs.malfunction.getId(id);//给故障管理列表筛选传值
				this.$refs.maintenance.getId(id);//给维护管理列表筛选传值
				
			}
		},
		onLoad:function(option){
			this.eqName=option.name;
			this.getInfo(option.id);
			this.eqId=option.id;
		}
	};
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #F2F2F2;
	}

	.flex-item {
		font-size: 20px;
		text-align: center;
	}
	
	.uni-icon {
		padding-left: 42%;
	}
	
	.uni-navbar__header-btns:last-child {
		width: 120px;
	}
	
	.uni-navbar__header-btns {
		padding: 0;
	}

	#manage-top {
		width: 94%;
		height: 47px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
	}

	#manage-top view {
		width: 33.33333%;
		font-size: 14px;
		color: #333333;
		text-align: center;
		line-height: 47px;
	}

	#manage-container .view-top {
		margin-top: 124px;
	}

	#manage-container .jbinformation {
		width: 94%;
		background-color: #ffffff;
		font-size: 16px;
		margin: 0 auto;
		margin-top: 10px;
		overflow: hidden;
	}
	
	.uni-navbar__content{
		position: fixed !important;
		left: 0;
		right: 0;
		top: 0;
		z-index: 12;
	}

	/* 

.jbinformation .inf-option {
	width: 94%;
	border-bottom: 1px solid #e5e5e5;
	margin: 0 auto;
	overflow: hidden;
	padding: 14px 0px;
}

.inf-option .inf-one {
	color: #999999;
	float: left;
}

.inf-option .inf-two {
	color: #333333;
	float: right;
}

.pdinf .big-one {
	color: #000000;
} */

	#manage-container .man-collaps {
		width: 100%;
		margin: 0 auto;
	}

	.uni-collapse-cell--hover {
		background: #ffffff;
	}

	.uni-collapse-cell--open {
		background: #ffffff;
	}

	.uni-collapse-cell__title-text {
		font-size: 12px;
	}

	.uni-collapse-cell__title {
		border-bottom: 1px solid #efefef;
		color: #666666;
	}

	.man-collaps .view-container {
		width: 92%;
		border-bottom: 1px solid #efefef;
		margin: 0 auto;
		padding: 15px 0px 15px 0px;
		font-size: 12px;
		overflow: hidden;
	}

	.view-container .container-left {
		float: left;
	}

	.view-container .container-right {
		width: 34px;
		height: 18px;
		background: #20bef2;
		font-size: 11px;
		text-align: center;
		line-height: 18px;
		color: #ffffff;
		float: right;
		margin: 4% 0px 0px;
	}

	.view-container .new-conright {
		background: #0cd47d;
	}

	.container-left .view-lb {
		font-size: 14px;
		color: #333333;
	}

	.container-left .view-sl {
		font-size: 12px;
		color: #999999;
		margin-top: 8px;
	}

	.segmented-control {
		width: 100% !important;
		height: 40px;
		line-height: 37px;
		font-size: 16px;
		text-align: center;
		background-color: #f2f2f2;
		border: none;
		border-radius: none;
		position: relative;
		left: 0;
		right: 0;
		top: 75px;
		padding-left: 3%;
		padding-right: 3%;
		z-index: 11;
	}

	.segmented-control-item {
		line-height: 30px;
	}

	.segmented-control-item {
		border: none;
	}

	.segmented-control-item.active {
		color: #458cd0;
	}

	.uni-collapse {
		margin-top: 10px;
	}

	.segmented-control-item.text.active {
		border-bottom-style: #458cd0;
	}

	.inf-pic {
		width: 94%;
		height: 200px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.inf-pic image {
		max-width: 100%;
		max-height: 100%;
	}
	.noassets{
		width: 300px;
		height: 300px;
		display: block;
		margin: 200px auto;
	}
	
	.segmented-control-item.text{
		font-size: 16px;
		line-height: 38px;
	}
	
	.supply-option .option-zl{
		width: 96px;
	}
</style>
